<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <login></login>
    <login-btn></login-btn>
    <login-form></login-form>
</div>

<!--定义局部组件方式二-->
<template id="loginForm">
    <form action="#" method="post">
        用户名<input type="text">
        密码<input type="password">
        <input type="button" value="登录">
    </form>
</template>

<script>
    //定义局部组件方式一
    var loginComponent = {
        template: '<div><h2>用户登录</h2></div>'
    }
    var loginBtn = {
        template: '<div><input type="button" value="登录"></div>'
    }
    var loginForm = {
        template: `#loginForm` //使用自定义的template标签的id选择器
    }

    var app = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components:{//用来注册局部组件，组件名和变量名一致时可以省略冒号
            login:loginComponent,
            loginBtn,
            loginForm
        }
    });
</script>
</body>
</html>